<template>
  <h1 style="background-image: url(http://1004.website/assets/555-1634ca3f.jpg);">Books Management</h1>
  <el-table
    :data="bookslist"
      class="table"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      
      label="书籍号"
      prop="bookId"
    />
    <!-- <el-table-column label="用户号" prop="userId" /> -->
    <!-- <el-table-column label="订单数量" prop="totalNum" /> -->
    <el-table-column prop="address" label="书籍图片" style="height: 2%;background-image: url(../../assets/555.jpg);">
      <template #default="scope">
        <el-image
          style="width: 60px; height: 60px"
          :src="scope.row.bookCover"
          :preview-src-list="[scope.row.bookCover]"
          hide-on-click-modal="true"
          preview-teleported="true"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><user /></el-icon>
            </div>
          </template>
        </el-image>
      </template>
    </el-table-column>

    <el-table-column label="书籍名" prop="bookName" style="color: black;"/>
    <el-table-column label="书籍分类" prop="categoryId" />
    <el-table-column label="书籍内容简介" prop="info" />
    <el-table-column label="仓库数量" prop="quantity" />
    <el-table-column label="售卖价格" prop="inPrice" />
    <el-table-column label="书籍折扣" prop="discount" />
    <el-table-column label="书籍出版城市" prop="city" />
    <el-table-column label="是否为新书" prop="newbook" />
    <el-table-column style="position: relative;" >
      <template #header>
        <el-input
          v-model="search"
          size="small"
          placeholder="填写书籍名并回车"
          @keydown.enter="findbookbyname"
        />
        <el-button
          size="small"
          class="dingdanxiangqing"
          @click="addbook()"
          style="background-color: rgba(11, 95, 136, 0.751); color: white"
          >上架书籍</el-button
        >
      </template>
      <template #default="scope"  >
        <ul style="list-style: none;">
          <li>  <el-button
          size="small"
          
          @click="updatebook(scope.$index, scope.row)"
          style="background-color: rgba(11, 95, 136, 0.751); color: white;"
          >更新书籍</el-button
        ></li>
          <li>  <el-button
          size="small"
          type="danger"
          @click="deletebook(scope.$index, scope.row)"
       
          >下架书籍</el-button
        ></li>
        </ul>
      
      
      </template>
    </el-table-column>
  </el-table>
  <add-book-dialog ref="abd"></add-book-dialog>
  <update-book ref="ub"></update-book>
  </template>
  <script>
import AddBookDialog from "./AddBookDialog.vue";
import UpdateBook from './UpdateBook.vue';

export default {
  name: "LastIndex",
  components: { AddBookDialog, UpdateBook },
  data() {
    return {
      bookslist: [],

      search: "",
    };
  },
  methods: {
    loadbookslist() {
      this.$axios.get("/getbooks").then((resp) => {
        console.log("书籍列表" + resp.data);

        this.bookslist = resp.data;
      });
    },
    findbookbyname() {
      if (this.search == "") {
        this.loadbookslist();
      } else {
        console.log(this.search);
        var data = new FormData();
        data.append("keywords", this.search);
        this.$axios.post("/search", data).then((resp) => {
          this.bookslist = resp.data;
        });
      }
    },
    deletebook(index, row) {
      console.log(row.bookId);
      var data = new FormData();
      data.append("bookId", row.bookId);
      this.$axios.post("/deletebook", data).then((resp) => {
        this.loadbookslist()
        this.$message({
        message: "删除成功",
        type: "success",
      });
      });
      
    },
    addbook() {
      console.log(85858);
      this.$refs.abd.centerDialogVisible = true;
    },
    updatebook(index,row){
     console.log(row);
     this.$refs.ub.centerDialogVisible=true
     this.$refs.ub.bookname=row.bookName
     this.$refs.ub.categoryId=row.categoryId
     this.$refs.ub.cover=row.bookCover
     this.$refs.ub.info=row.info
     this.$refs.ub.inPrice=row.inPrice
     this.$refs.ub.quantity=row.quantity
     this.$refs.ub.city=row.city
     this.$refs.ub.newbook=row.newbook
     this.$refs.ub.bookId=row.bookId
     this.$refs.ub.discount=row.discount
     
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex, row);
   
     
        return "success-rows";
  
    
    },
      


  },
  mounted: function () {
    this.loadbookslist();
  },
};
</script>
<style>
/* .el-button + .el-button  {
 margin-left: -12px; 
} */



.el-table::before {
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}

.el-table .success-rows{
  background-image: url(../../assets/555.jpg);
}
.el-table.table th, .el-table.table tr,.el-table.table td{
 border: 0;
background-image: url(http://1004.website/assets/555-1634ca3f.jpg);
color: black;
 }
 .el-table.table tr,.el-table.table td:hover{
 border: 0;

color: white
}
</style>